<!DOCTYPE html>
<html>

<head>
    <title>个人主页</title>
    <meta charset="utf-8">
    <style>
        #banner {
            background-image: url(img/bg.jpg);
            width: 100%;
            height: 250px;
            background-position: 50% 50%;
            text-align: center;
            padding-top: 50px;
            position: fixed;
            top: 0;
        }
        
        #leader {
            margin: 200px auto;
        }
        
        .line {
            font-size: 30px;
            font-family: 楷书;
            margin: 60px 22px;
            color: gray;
        }
        
        #down1 {
            position: absolute;
            top: 0;
            left: 100px;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            animation: xia1 20s linear;
            animation-iteration-count: infinite;
        }
        
        #down2 {
            position: absolute;
            top: 0;
            left: 200px;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            animation: xia2 30s linear;
            animation-iteration-count: infinite;
        }
        
        #down3 {
            position: absolute;
            top: 0;
            right: 200px;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            animation: xia3 35s linear;
            animation-iteration-count: infinite;
        }
        
        #down4 {
            position: absolute;
            top: 0;
            right: 100px;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            animation: xia4 45s linear;
            animation-iteration-count: infinite;
        }
        
        #down5 {
            position: absolute;
            top: 0;
            left: 100px;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            animation: xia1 45s linear;
            animation-iteration-count: infinite;
        }
        
        #down6 {
            position: absolute;
            top: 0;
            left: 200px;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            animation: xia2 40s linear;
            animation-iteration-count: infinite;
        }
        
        #down7 {
            position: absolute;
            top: 0;
            right: 200px;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            animation: xia3 25s linear;
            animation-iteration-count: infinite;
        }
        
        #down8 {
            position: absolute;
            top: 0;
            right: 100px;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            animation: xia4 20s linear;
            animation-iteration-count: infinite;
        }
        
        #container {
            margin: 0 auto;
            margin-top: 330px;
            width: 800px;
            /*position: relative;*/
        }
        
        #inner {
            width: 800px;
            height: 700px;
            /*background-color: black;*/
            background-image: url(img/2.jpg);
            background-size: 100% 100%;
            position: relative;
            z-index: -1;
        }
        
        #leader a:hover {
            font-size: 35px;
            background-color: skyblue;
        }
        
        #leader a {
            color: blue;
        }
        
        .text {
            text-indent: 2em;
            font-size: 20px;
        }
        
        .image {
            border: 2px solid white;
            border-radius: 50%;
        }
        
        .snow {
            background-image: url(img/snow.png);
            background-size: 100%;
        }
        
        #mc1 {
            position: absolute;
            left: 5px;
            top: 20px;
            width: 250px;
        }
        
        #mc0 {
            position: absolute;
            left: 240px;
            top: 120px;
            width: 280px;
            border: 2px solid blue;
        }
        
        #mc2 {
            position: absolute;
            right: 20px;
            top: 50px;
            width: 260px;
        }
        
        #mc3 {
            position: absolute;
            right: 310px;
            bottom: 5px;
            width: 280px;
        }
        
        img {
            /*width: 800px;*/
            width: 100%;
        }
        
        p {
            line-height: 40px;
            font-family: 楷书;
        }
        
        h1 {
            font-family: 楷书;
        }
        
        .move {
            text-align: center;
            width: 320px;
            height: 50px;
            border: 1px dotted black;
            border-radius: 5px;
            background-color: red;
            animation: welcome 10s linear;
            animation-iteration-count: infinite;
            position: fixed;
            top: 200px;
            left: 550px;
            /*color: #eeeeee;*/
            margin: 30px;
        }
        
        @keyframes xia1 {
            0% {
                left: 100px;
                top: 0px;
            }
            20% {
                left: 300px;
                top: 500px;
            }
            40% {
                left: 100px;
                top: 1200px;
            }
            60% {
                left: 200px;
                top: 1900px;
            }
            80% {
                left: 400px;
                top: 2600px;
            }
            100% {
                left: 200px;
                top: 3000px;
            }
        }
        
        @keyframes xia2 {
            0% {
                left: 200px;
                top: 0px;
            }
            20% {
                left: 100px;
                top: 600px;
            }
            40% {
                left: 200px;
                top: 1200px;
            }
            60% {
                left: 350px;
                top: 1800px;
            }
            80% {
                left: 200px;
                top: 2400px;
            }
            100% {
                left: 100px;
                top: 2600px;
            }
        }
        
        @keyframes xia4 {
            0% {
                right: 100px;
                top: 0px;
            }
            20% {
                right: 200px;
                top: 800px;
            }
            40% {
                right: 200px;
                top: 1500px;
            }
            60% {
                right: 360px;
                top: 2100px;
            }
            80% {
                right: 100px;
                top: 2400px;
            }
            100% {
                right: 200px;
                top: 2900px;
            }
        }
        
        @keyframes xia3 {
            0% {
                right: 200px;
                top: 0px;
            }
            20% {
                right: 100px;
                top: 600px;
            }
            40% {
                right: 200px;
                top: 1200px;
            }
            60% {
                right: 100px;
                top: 1800px;
            }
            80% {
                right: 200px;
                top: 2400px;
            }
            100% {
                right: 100px;
                top: 2850px;
            }
        }
        
        @keyframes welcome {
            0% {
                background: red;
                left: 0px;
                top: 130px;
            }
            20% {
                background: pink;
                left: 316px;
                top: 140px;
            }
            40% {
                background-color: white;
                left: 632px;
                top: 130px;
            }
            60% {
                background-color: green;
                left: 948px;
                top: 140px;
            }
            80% {
                background: brown;
                left: 1264px;
                top: 130px;
            }
            100% {
                background: blue;
                left: 1565px;
                top: 140px;
            }
        }
        
        body {
            background-color: rgba(70, 125, 189, 80%);
            margin: 0;
            position: relative;
        }
    </style>
</head>

<body>
    <div id="box">
        <div id="banner">
            <div id="leader">
                <span class="line"><a href="#person">个人主页</a>
                </span>
                <span class="line"><a href="#me">性格特点</a>
                </span>
                <span class="line"><a href="#ms">我的学校</a>
                </span>
                <span class="line"><a href="#myhome">我的家乡</a>
                </span>
                <span class="line"><a href="#animal">我的动漫</a></span>
            </div>
        </div>
    </div>
    <div id="down1" class="snow"></div>
    <div id="down2" class="snow"></div>
    <div id="down3" class="snow"></div>
    <div id="down4" class="snow"></div>
    <div id="down5" class="snow"></div>
    <div id="down6" class="snow"></div>
    <div id="down7" class="snow"></div>
    <div id="down8" class="snow"></div>
    <div id="container">
        <h1 style="text-align:center">·彭珊珊·</h1>
        <br>
        <a name="me">
            <div class="move" style="font-family:隶书">欢迎进入我的个人主页，很开心与你分享我的personal information</div>

            <h2>我的性格特点</h2>
            <p class="text">忠实诚信,讲原则，说到做到，决不推卸责任；有自制力，做事情始终坚持有始有终，从不半途而废；肯学习,有问题不逃避,愿意虚心向他人学习；自信但不自负,不以自我为中心；愿意以谦虚态度赞扬接纳优越者,权威者；会用100%的热情和精力投入到工作中；平易近人。为人诚恳,性格开朗,积极进取,适应力强、勤奋好学、脚踏实地，有较强的团队精神,工作积极进取,态度认真。</p>
            <p class="text">本人性格文静，待人友好，为人诚实谦虚，善于思考，学习能力强。专业知识较扎实，能够熟练 操作办公系统软件，对新事物接受能力快，工作主动性高,做事认真负责。但人非完人，自己在某些方面还是有一定的不足，比如知识，社会经验等，不过我相信这些都是可以通过自己努力的学习来提高的，我也正朝着这个方向努力!我愿意从最基础工作做起！</p>

            <img src="img/me.jpg"></a>
        <a name="ms">
            <br>
            <hr color=#5e8000 size=5px>
            <br>
            <br>

            <h2>我的学校</h2>
            <p class="text">河南财经政法大学（Henan University of Economics and Law）位于河南省郑州市，河南财经政法大学由原河南财经学院和原河南省政法管理干部学院于2010年3月合并组建而成，是一所经中华人民共和国教育部批准成立的，以经济学、管理学和法学为主的省属公办全日制普通高等学校，是河南省博士学位授予权立项建设单位、河南省重点支持建设的骨干高校之一。截至2016年8月，学校现有文北校区、文南校区和郑东校区3个校区，占地面积2000多亩，总建筑面积107万余平方米。学校建有各类教学实验室，图书馆藏书260多万册，教学、科研、体育场等基础设施齐全。共有24个院（系），开设59个本科专业；共有全日制在校学生28000余人，现有教职工1900余人，其中专任教师1500余人，高级职称人数700多人，具有博士学位教师370人、硕士学位教师843人。</p>
            <a name="myhome">
                <img class="pic" src="img/ms.jpg">
            </a>
            <br>
            <hr color=#5e8000 size=5px>
            <br>
            <br>

            <h2>我的家乡</h2>
            <p class="text">西平位于河南省中南部，北接漯河市源汇区，南望驻马店市，东临上蔡县，西部与平顶山市舞钢市毗邻。南距武汉300公里，北距新郑国际机场130公里，位于郑州及武汉两大都市“一日经济圈”内。京广铁路、京珠高速公路、107国道纵贯全境。属于驻马店市。 全县有人口86万（2017年）[1] ，面积1089.77平方公里[1] 。1991年被国务院批准为对外开放县，1994年被农业部定为“乡镇企业东中西部合作示范工程试点”县，2002年被河南省评为创建省级文明卫生城市先进县。2009年“国家科技富民强县试点县”。</p>
            <img src="img/myhome.jpg">
        </a>
        <a name="animal">
            <br>
            <hr color=#5e8000 size=5px>
            <br>
            <br>
            <h2>我的动漫</h2>
            <p class="text">哆啦A梦的创造要追溯到1969年的某个截稿日，大师藤子·F·不二雄的家里突然闯进了一只小猫，虽然很快就要截稿了，但大师还是和小猫玩了起来，还替小猫挠虱子，而这一挠就是几个小时，等大师发现时间不够用的时候，已经来不及完成稿子。这时老师像热锅上的蚂蚁走来走去，突然踢到了女儿的不倒翁玩具，于是老师灵光一显，把猫的形象和不倒翁结合起来，就创造了带给我们欢乐的哆啦A梦。该漫画自1970年1月开始在《小学1-4年级生》杂志中开始连载，并且大受小学生欢迎。《哆啦A梦》系列的篇幅浩繁，由原作者亲自执笔的短篇漫画共1345回（分为45卷单行本），大长篇漫画16回[1]
                ，《哆啦A梦Plus》6卷，在藤本弘去世后，又由其弟子创作了大量漫画，至今仍有新作品在不断推出.
            </p>
            <div id="inner">
                <img id="mc1" class="image" src="img/mc1.jpg">
                <img id="mc2" class="image" src="img/mc2.jpg">
                <img id="mc3" class="image" src="img/mc3.jpg">
                <img id="mc0" class="image" src="img/mc0.jpg">
            </div>
        </a>
        <br><br>
    </div>
</body>

</html>